Pomodoro Timer
Pomodoro Timers are designed to be used as part of the Pomodoro Technique, which is a time management method aimed at breaking work into set intervals separated by breaks (each interval is known as a Pomodoro (which means "tomato" in Italian)). The overall purpose for time management is to reduce inefficiencies and effects of internal and external interruptions of focus. Traditionally, when it was developed in the late 1980s by Francesco Cirillo, a mechanical kitchen timer was used with the intervals having a length of 25 minutes and short breaks of 5 minutes. This project is a basic implementation of a Pomodoro Timer which can be customized with a variable length for intervals and breaks.
Productivity Strategy
Ultimately, the Pomodoro Technique attempts to increase productivity and awareness. The various goals of the Pomodoro Timer include enhancing concentration by minimizing distractions, increasing awareness around tasks to be completed, boosting motivation around achieving milestones, dividing tasks into finer segments, refining the duration estimation process of tasks, avoiding procrastination and ineffective multitasking, and alleviating anxiety linked with actually starting a task. The original Pomodoro Technique was composed of the following sequence for a session:
- Decide on the task to be performed.
- Set the timer for 25 minutes (or another duration selected for the intervals).
- Work on the task for the duration of the interval without distractions.
- Once the interval is complete, take a short break for 5 minutes (or another duration selected for the breaks).
- Repeat from Step 2 until 4 intervals have been successfully completed.
- Once 4 intervals have been completed, take a long break for 20 minutes (or another duration selected for the breaks).
- Once the long break is complete, repeat from Step 2 until the session is complete.
Basic Program Design
A basic example of a Pomodoro Timer was developed for the project. The application consists of a display for the countdown along with buttons to control starting or pausing the countdown, resetting the countdown for an interval, and setting the time for a short break (default used is 5 minutes). There is also a simple slider which can be used to customize the length of an interval. Some statistics are also provided with regard to a count for the number of intervals and breaks which have occurred and total time accumulated from each interval and break. Finally, a text box is included for taking notes during the session, where the notes will be saved to local storage and will be reloaded when the page is refreshed (although they will likely be deleted when cache is cleared and should not be relied upon for access in the future).
<div class = "timer"> <div id = "countdown"></div> </div> <div class = "controls"> <button class = "button" id = "button-start">Start</button> <button class = "button" id = "button-reset">Reset</button> <button class = "button" id = "button-break">Break</button> </div> <div class = "slider"> <input type = "range" id = "slider-time" min = "60" max = "3600" value = "1500" step = "60"> </div> <div class = "statistics"> <div id = "sessions-display">Sessions Counter: <span id = "count-sessions">0</span></div> <div id = "total-time-display">Total Time: <span id = "count-time">0</span></div> <audio id = "alarm"><source src = "./Notification.mp3"></audio> </div> <textarea class = "notes" rows = "8" cols = "50" placeholder = "Notes..."></textarea>
// Set variables for the corresponding elements.
const textCountdown = document.querySelector("#countdown");
const buttonStart = document.querySelector("#button-start");
const buttonReset = document.querySelector("#button-reset");
const buttonBreak = document.querySelector("#button-break");
const slider = document.querySelector("#slider-time");
const textSessions = document.querySelector("#count-sessions");
const textTotal = document.querySelector("#count-time");
// Set variables used for the operations of the app.
let time = slider.value;
let isRunning = false;
let intervalId = null;
let countSessions = 0;
let countTotal = 0;
// Set the initial text for the countdown and total accumulated time.
textCountdown.innerHTML = formatCountdown(time);
textTotal.innerHTML = formatTotal(countTotal);
// Add an event to start or pause the countdown.
buttonStart.addEventListener("click", () => {
if (isRunning) {
timerPause();
} else {
timerStart();
}
});
// Add an event to reset the time for an interval (25 minutes).
buttonReset.addEventListener("click", () => {
timerPause();
time = 1500;
slider.value = time;
textCountdown.innerHTML = formatCountdown(time);
});
// Add an event to change the time for a break (5 minutes).
slider.addEventListener("input", (event) => {
timerPause();
time = event.target.value;
textCountdown.innerHTML = formatCountdown(time);
});
// Add an event to change the time for a break.
buttonBreak.addEventListener("click", () => {
timerPause();
time = 300;
textCountdown.innerHTML = formatCountdown(time);
});
// Create an interval and start the countdown.
function timerStart() {
isRunning = true;
buttonStart.innerHTML = "Pause";
intervalId = setInterval(() => {
time--;
textCountdown.innerHTML = formatCountdown(time);
if (time === 0) {
timerPause();
showNotification();
time = slider.value;
textCountdown.innerHTML = formatCountdown(time);
countSessions++;
countTotal += parseInt(slider.value);
textSessions.innerHTML = countSessions;
textTotal.innerHTML = formatTotal(countTotal);
}
}, 1000);
}
// Stop the countdown at the current time.
function timerPause() {
isRunning = false;
buttonStart.innerHTML = "Start";
clearInterval(intervalId);
}
// Issue a notification that the countdown is complete.
function showNotification() {
document.getElementById("alarm").play();
alert("Interval complete! Take a break.");
}
// Format the text for the countdown as MM:SS.
function formatCountdown(seconds) {
let remainingMinutes = Math.floor(seconds / 60);
let remainingSeconds = seconds % 60;
return `${remainingMinutes < 10 ? "0" : ""}${remainingMinutes}:${remainingSeconds < 10 ? "0" : ""}${remainingSeconds}`;
}
// Format the text for the total accumulated time as HH:MM:SS.
function formatTotal(seconds) {
let remainingHours = Math.floor(seconds / 3600);
let remainingMinutes = Math.floor((seconds % 3600) / 60);
let remainingSeconds = (seconds % 3600) % 60;
return `${remainingHours < 10 ? "0" : ""}${remainingHours}:${remainingMinutes < 10 ? "0" : ""}${remainingMinutes}:${remainingSeconds < 10 ? "0" : ""}${remainingSeconds}`;
}
// Save the notes to local storage to be loaded again.
function saveNotes() {
let notes = document.querySelector("textarea").value;
localStorage.setItem("notes", notes);
}
// Retrieve the notes from local storage if there are any.
function loadNotes() {
let notes = localStorage.getItem("notes");
if (notes) {
document.querySelector("textarea").value = notes;
}
}
// Add an event listener to save notes when they change.
document.querySelector("textarea").addEventListener("change", saveNotes);
// Retrieve any stored notes when the page loads.
window.addEventListener("load", loadNotes);